<template>
  <div id="app">
    <router-view />
    <!--    <keep-alive include="MapSq,MapHome">-->
    <!--      <router-view></router-view>-->
    <!--    </keep-alive>-->
    <!--    <router-view v-if="!$route.meta.keepAlive"></router-view>-->
  </div>
</template>
<script>export default {
  name: 'App',
  data () {
    return {
      count: 0,
      percent: '',
      imglength: 0
    }
  },
  mounted () {
    this.preload()
  },
  methods: {
    preload: function () {
      let imgs = [
        'images/1.png',
        'images/2.png',
        'images/3.png',
        'images/4.png',
        'images/arr-tit.png',
        'images/blue-dot.gif',
        'images/col-bg1.png',
        'images/col-bg2',
        'images/col-bg2.png',
        'images/cor.png',
        'images/cor2.png',
        'images/default-photo.jpeg',
        'images/default-photo.jpg',
        'images/exit.png',
        'images/h-col1-bg.png',
        'images/h-col2-bg.png',
        'images/h-col4-bg.png',
        'images/h-col5-bg.png',
        'images/h-col6-bg.png',
        'images/h-num-bg.png',
        'images/h-tit1-bg.png',
        'images/h-tit12-bg.png',
        'images/ico-banner.png',
        'images/ico-center1.png',
        'images/ico-center2.png',
        'images/ico-center3.png',
        'images/ico-center4.png',
        'images/ico-center5.png',
        'images/ico-center6.png',
        'images/line-bg.png',
        'images/logo.png',
        'images/main-bg.jpg',
        'images/map-ico1.png',
        'images/map-ico2.png',
        'images/map-ico3.png',
        'images/map-ico4.png',
        'images/map-ico5.png',
        'images/map-ico6.png',
        'images/map-ico7.png',
        'images/map-ico8.png',
        'images/map-ico9.png',
        'images/map-ico10.png',
        'images/map-tit.png',
        'images/map-ylzx.jpg',
        'images/news-bg.jpg',
        'images/next.png',
        'images/num-bg.png',
        'images/num-bg1.png',
        'images/num-bg2.png',
        'images/prev.png',
        'images/red-dot.gif',
        'images/temp-photo.jpg',
        'images/weather1.png'
      ]
      this.imglength = imgs.length
      for (let img of imgs) {
        let image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor(this.count / this.imglength * 100)
          this.percent = `${percentNum}%`
          // console.log(this.percent)
          document.getElementById('_bar').style.width = `${percentNum}%`
          document.getElementById('lotxt').innerHTML = this.percent
          // console.log(this.percent)
        }
      }
    }
  },
  watch: {
    count: function (val) {
      if (val === this.imglength) {
        document.body.removeChild(document.getElementById('Loading'))
      }
    }
  }
}
</script>
<style lang="scss">
</style>
